<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @copyright   Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
?>
<?php /** @var $this \Magento\DesignEditor\Block\Adminhtml\Editor\Tools\Code\Custom */ ?>
<div id="vde-tab-custom-messages-placeholder"></div>
<div class="custom-code-description">
    <p><?php echo __('Update the CSS code to overwrite the default styles or upload your own CSS file.'); ?></p>
    <h4><?php echo __('Custom CSS'); ?></h4>
    <div class="custom-file">
        <span data-action="add" class="action-add" title="<?php echo __('Upload File'); ?>">
            <span><?php echo __('Upload File'); ?></span>
            <?php echo $this->getFormHtml() ?>
        </span>
        <label for="<?php echo $this->getFileElementName() ?>"><?php echo __('Upload Custom CSS'); ?></label>
        <div class="uploaded-file-wrapper" data-file="uploaded-css">
            <div class="uploaded-css">
                <div class="file-row">
                    <span id="custom-file-name" class="label"><?php echo $this->getCustomFileName() ?></span>
                    <button data-action="delete" class="action-delete" title="<?php echo __('Delete File'); ?>">
                        <span><?php echo __('Delete File'); ?></span>
                    </button>
                    <button data-action="download" class="action-download" title="<?php echo __('Download File'); ?>">
                        <span><?php echo __('Download File'); ?></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="manage-assets-buttons">
        <button data-manage="images" class="action-image-assets" title="<?php echo __('Image Assets'); ?>">
            <span><?php echo __('Image Assets'); ?></span>
        </button>
        <button data-manage="fonts" class="action-font-assets" title="<?php echo __('Font Assets'); ?>">
            <span><?php echo __('Font Assets'); ?></span>
        </button>
    </div>
</div>
<div class="custom-code">
    <div class="textarea-container">
        <textarea name="custom_code" id="custom_code" cols="30" rows="10"><?php echo $this->getCustomCssContent() ?></textarea>
    </div>
    <button data-action="update" class="action-update primary" title="<?php echo __('Update'); ?>">
        <span><?php echo __('Update'); ?></span>
    </button>
</div>


<script type="text/javascript">
require([
    "jquery",
    "jquery/file-uploader",
    "Magento_DesignEditor/js/tools-files",
    "Magento_DesignEditor/js/custom-css"
], function($){


    $('[data-manage="fonts"]').on('click', function() {
        MediabrowserUtility.openDialog(
            '<?php echo $this->getMediaBrowserUrl('custom_code', \Magento\Theme\Model\Wysiwyg\Storage::TYPE_FONT) ?>',
            null,
            null,
            '<?php echo $this->escapeQuote(__('Font Assets'), true); ?>'
        );
    });
    $('[data-manage="images"]').on('click', function() {
        MediabrowserUtility.openDialog(
            '<?php echo $this->getMediaBrowserUrl('custom_code', \Magento\Theme\Model\Wysiwyg\Storage::TYPE_IMAGE) ?>',
            null,
            null,
            '<?php echo $this->escapeQuote(__('Image Assets'), true); ?>'
        );
    });
    $('#vde-tab-custom').customCssPanel({
        saveCustomCssUrl: '<?php echo $this->getSaveCustomCssUrl() ?>',
        downloadCustomCssUrl: '<?php echo $this->getDownloadCustomCssUrl() ?>'
    });

    $( '#' + '<?php echo $this->getFileElementName() ?>' ).fileupload({
        dataType: 'json',
        replaceFileInput: false,
        url : '<?php echo $this->getUploadUrl() ?>',

        /**
         * Handler of "file selected" event
         * @param e
         * @param data
         */
        add: function (e, data) {
            data.submit();
        },

        /**
         * Handler on "upload ajax request done" event
         * @param e
         * @param data
         */
        done: function (e, data) {
            var contentArea = $('#custom_code');
            contentArea.val('');
            $(this).val('');
            $('#css_uploader_button').attr('disabled', true);
            if (!data.result.error) {
                contentArea.val(data.result.content);
                $('#vde-tab-custom').customCssPanel('updateButtons');
                $('#vde-tab-custom').trigger('refreshIframe');
            }

            $('#vde-tab-custom').trigger('addMessage', {
                containerId: '#vde-tab-custom-messages-placeholder',
                message: data.result.message
            });
            $('.vde-tools-content').trigger('resize.vdeToolsResize');
        },

        /**
         * Handle on "upload ajax request fail" event
         * @param e
         * @param data
         */
        fail: function (e, data) {
            $('#vde-tab-custom').customCssPanel('updateButtons');
        }
    });

});
</script>
